<template>
  <div class="container">

    <!-- 导航条 -->
    <van-nav-bar title="商品列表" :left-arrow="true" @click-left="$router.back()" />

    <!-- 搜索框 -->
    <van-search readonly :value="searchContent || '商品搜索'" background="#fff" show-action placeholder="请输入您搜索的商品">
      <template v-slot:action>
        <img :src="displayImg" class="display-change" @click="displayTpye = displayTpye == 0 ? 1 : 0">
      </template>
    </van-search>

    <!-- 排序 -->
    <div class="rank">
      <span :style="{ color: rankIndex == 0 ? 'red' : 'black' }" @click="rankClick(0)">综合</span>
      <span :style="{ color: rankIndex == 1 ? 'red' : 'black' }" @click="rankClick(1)">销量</span>
      <span :style="{ color: rankIndex == 2 ? 'red' : 'black' }" @click="rankClick(2)">价格</span>
    </div>

    <!-- 商品列表 -->
    <div :class="displayTpye == 0 ? 'pro-box-grid' : 'pro-box-row'">
      <div v-for="item in list" :key="item.goods_id" class="pro-item" @click="itemClick(item)">
        <img class="item-pic" :src="item.goods_image" alt="">
        <div class="item-content">

          <div class="item-name">{{ item.goods_name }}</div>
          <div>
            <span class="item-money-now">¥{{ item.goods_price_max }}</span>
            <span class="item-money-pre">¥{{ item.goods_price_min }}</span>
          </div>
          <div class="item-count">已售 {{ item.goods_sales }}件</div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { searchList } from '@/api';

export default {
  name: 'search',
  data() {
    return {
      displayTpye: 0, // 商品列表展示方式, 0:网格布局, 1:列表布局
      rankIndex: 0,
      list: [],

    }
  },
  created() {

    this.getSearchData()
  },
  computed: {
    searchContent() {
      return this.$route.query.search
    },

    displayImg() {
      return this.displayTpye == 0 ? require('@/assets/icon_displayType.png') : require('@/assets/icon_displayType_row.png')
    },
    rankType(){
      return this.rankIndex === 0 ? 'all' : (this.rankIndex === 1 ? 'sales' : 'price')
    }

  },
  methods: {

    // 请求数据
    async getSearchData() {
      const obj = {
        'goodsName': this.searchContent,
        'page': 1,
        'sortType' : this.sortType
      }
      const resp = await searchList(obj)
      this.list = resp.data.list.data
      // console.log(this.list)
    },

    // 切换排序方式
    rankClick(value) {
      this.rankIndex = value
      this.getSearchData()
    },

    // 商品点击, 进入商品详情页
    itemClick(item) {
      // console.log(item)
      this.$router.push(`/prodetail/${item.goods_id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.container {

  height: 100vh;
  display: flex;
  flex-direction: column;

  .display-change {
    width: 20px;
    height: 20px;
    clear: both;
    display: block;
    margin: auto;

  }

  .rank {
    display: flex;

    span {
      flex: 1;
      text-align: center;
    }
  }

  .pro-box-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px 15px;
    justify-content: space-between;
    background-color: #f5f5f5;
    row-gap: 15px;
    flex-grow: 1;
    gap: 10px;

    .pro-item {
      width: 165px;
      height: 250px;
      background-color: white;
      display: flex;
      flex-direction: column;

      .item-pic {
        width: 100%;
        padding: 0px; 
      }

      .item-content {

        padding: 10px;

        .item-name {
        // max-lines: 2;
        font-size: 13px;
        color: #202020;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .item-money-now {
        color: red;
        font-size: 13px;
        margin-right: 10px;
      }

      .item-money-pre {
        color: #666666;
        font-size: 11px;
        text-decoration: line-through;
      }

      .item-count {
        font-size: 12px;
        color: #999999;
      }


      }

    }
  }


  .pro-box-row {
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: #f5f5f5;
    row-gap: 15px;
    flex-grow: 1; 
    padding-top: 15px;

    .pro-item {
      width: 100%;
      height: 100px;
      background-color: white;
      display: flex;
      flex-direction: row;
      justify-content: start;
      padding: 10px;

      .item-pic {
        height: 100%;
      }

      .item-name {
        // max-lines: 2;
        font-size: 13px;
        color: #202020;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .item-money-now {
        color: red;
        font-size: 13px;
        margin-right: 10px;
      }

      .item-money-pre {
        color: #666666;
        font-size: 11px;
        text-decoration: line-through;
      }

      .item-count {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>